<template>
	<view style="width: 100%; height:500rpx">
		<l-f2 ref="chart"></l-f2>
	</view>
</template>

<script>
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2.min.js';
	export default {
		name: "zEacher",
		props: {
			recentEstimate: {
				type: Array,
				default () {
					return []
				}
			}
		},
		watch: {
			recentEstimate:{
				handler(newName, oldName) {
				           console.log(newName); 
						   console.log(oldName); 
							this.data = newName.map(item => {
								let json = {};
								json['time'] = item.index.substring(2,4) + '/' + item.index.substring(4,6)
								json['tem'] = Number(item.item)
								return json
							})
							console.log("表格数据")
							console.log(this.data)
							this.$nextTick(()=>{
								this.chageData()
							})
				        },
				        immediate: true,
				        deep: true
			}
		},
		data() {
			return {
				data: []
			};
		},
		mounted() {
			// colors: [ '#F04864', '#D66BCA', '#8543E0', '#8E77ED', '#3436C7', '#737EE6', '#223273', '#7EA2E6' ],
			this.init()
		},
		methods: {
			init() {
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.changeData(this.data);
					chart.tooltip({
						showCrosshairs: true,
						showItemMarker: false,
						onShow: function onShow(ev) {
							const items = ev.items;
							items[0].name = null;
							items[0].value = items[0].value;
						}
					});
					chart.scale({
						time: {
							tickCount: 6,
							range: [0, 1]
						},
						tem: {
							tickCount: 5,
							min: 0
						}
					});
					chart.axis('time', {
						label: function label(text, index, total) {
							const textCfg = {};
							if (index === 0) {
								textCfg.textAlign = 'left';
							} else if (index === total - 1) {
								textCfg.textAlign = 'right';
							}
							return textCfg;
						}
					});
					chart.area().position('time*tem');
					chart.line().position('time*tem');
					chart.point().position('time*tem').style({
						stroke: '#fff',
						lineWidth: 2
					});
					chart.render();
					return chart;
				});
			},
			chageData(){
				this.$refs.chart.changeData(this.data)
			}
		}
	}
</script>

<style>

</style>
